<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
</head>

<style>
.td{width:400px;overflow:hidden;color:yellow}
</style>
<body>
    <h2 style="color: yellow; width: 500px; margin: 10px auto">欢迎进入餐厅,尊敬的{{ username }}！！！</h2>

<div style="color: yellow; width: 650px; margin: 100px auto">
	菜品名称：<input type="text" style="color: black;" id="casName" value="">
        <br>
	菜品价格：<input type="text" style="color: black;" id="casPrice" value="">
        <br>
    菜品数量：<input type="number" style="color: black;" id="casNum">
        <br>
    <br>
    <input type="button" href="javascript:;" id="add" value="添加" class="btn-danger" onclick="addRow()"/>
    <input type="button" href="javascript:;" id="delete" value="删除" class="btn-danger" onclick="chooseDel()"/>
    <br>
    <input type="button" href="javascript:;" id="search" value="计算菜品总价" class="btn-danger"/>


</div>

    <table border="3" class="table" style="color: white; width: 600px; margin: 100px auto" id="ta">
        <thead>
        <tr id="tr">
            <th scope="row" width="50px">选择</th>
            <th scope="row">菜品名称</th>
            <th scope="row">菜品价格</th>
            <th scope="row">菜品数量</th>
            <th scope="row">操作</th>
        </tr>
        </thead>
        <tbody>
        {% for men in menu_list1 %}
            <tr>
                <td><input type="checkbox" name="checks" id="chk" value="0"/></td>
                <td>{{men.名称}}</td>
                <td>{{men.价格}}</td>
                <td width="200px" id="number">{{men.数量}}</td>
                <td>
                    <input type="button" class="btn-primary" value="删除" onclick="delRow(this)"/>
                    <input type="button" class="btn-primary" value="修改数量" onclick="updataRow(this)"/>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <script type="text/javascript">
        // 删除行
        function delRow(btn){
            // 获取table对象（根据id获取）
            var ta = document.getElementById('ta');
            // 获取要删除的行表格对象
            var tr = btn.parentNode.parentNode;
            ta.deleteRow(tr.rowIndex);
        }
        
        // 修改单独一行的菜品数量
        function updataRow(btn) {
            // 获取单元格
            // 获取行对象
            var tr = btn.parentNode.parentNode;
            var numb = tr.cells['number'];
            if (!isNaN(Number(numb.innerHTML))){
                // 修改单元格内容
                numb.innerHTML="<input style='color: black' type='text' value='"+numb.innerHTML+"' onblur='updataRow2(this)'/>"
            }
        }
        function updataRow2(inp) {
            // 获取单元格
            var numb = inp.parentNode;
            numb.innerHTML = inp.value;
        }

        // 批量删除
        function chooseDel() {
            // 获取表格对象
            var ta = document.getElementById('ta');
            // 获取要删除的行号
            var chks = document.getElementsByName('checks')
            for (var i = 0;i<chks.length;i++){
                if (chks[i].checked){
                    ta.deleteRow(i+1)
                    i--
                }
            }
            // 删除
        }
        
        // 添加行
        function addRow() {
            // 获取表格对象
            var ta = document.getElementById('ta');
            // 添加行
            var tr = ta.insertRow(1)
            // 添加单元格
            var cell0 = tr.insertCell(0);
            cell0.innerHTML = "<input type='checkbox' name='checks'/>";
            var cell1 = tr.insertCell(1);
            cell1.innerHTML = document.getElementById("casName").value;
            var cell2 = tr.insertCell(2);
            cell2.innerHTML = document.getElementById("casPrice").value;
            var cell3 = tr.insertCell(3);
            cell3.innerHTML = document.getElementById("casNum").value;
            var cell4 = tr.insertCell(4);
            cell4.innerHTML = "<input type='button' class='btn-primary' value='删除' onclick='delRow(this)'/>\n" +
                "                    <input type='button' class='btn-primary' value='修改数量' onclick='updataRow(this)'/>"
        }
    </script>
</body>


<style type="text/css">
	body{
		background: url("/static/picture/canteen2.jpg") no-repeat center center fixed;
                /*兼容浏览器版本*/
                -webkit-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
	}
	</style>
</html>